<template>
  <div class=" text-gray-100  bg-gray-900 min-h-screen    ">
    <div class="container mx-auto">
      <h1>{{$route.params.name}}</h1>
      <hr>
      <h1>wordListLength: {{ word_list.length }}</h1>
      <div class="flex   space-x-3">
        <button @click="Previous()" class="p-6 flex-1 text-black  ">Previous_one</button>
        <button @click="Next_one()" class="p-6 flex-1 text-black  ">Next_one</button>
      </div>
      <div class="">
        <button @click="show()" class="p-3 text-black w-full  bg-gray-500  text-white  ">show</button>
      </div>

      <div v-for="(item,index) in word_list">
        <div v-if="item.index == key">
          <p>{{ item.index }}</p>
          <h1 class="text-6xl " ref="english">{{ item.eng }}</h1>
          <h3 v-if="isShow" class="  text-5xl   ">{{ item.chi }}</h3>

          <p class="text-4xl  mt-12">{{ item.eng_script }}</p>
          <p class="text-2xl  text-gray-600  ">{{ item.chi_script }}</p>
        </div>
      </div>
      <br><br>
      <input class="text-black  " v-model="chinese_mean">
      <button @click="update_chinese()">update</button>

      <br><br><br><br><br><br>
      <button class="p-3 text-black "  @click="add_to_localStorage()">add to localStorage</button>



      <br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br> <br><br><br><br><br>
      <p :class="this.bg_color" class="w-12 h-12   rounded-full  "></p>
      <button class="p-2 bg-blue-300 " @click="set_complexity_0()">set_complexity_0</button>
      <br><br><br><br><br>

    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "Movie_word",
  components: {
  },
  data() {
    return {
      word_list: [],
      isShow: false,
      key: 0,
      chinese_mean:"",
      wordListLength: 0,
      bg_color: 'bg-gray-800'
    }
  },
  watch: {
    key(val, oldVal) {
      console.log(this.word_list[this.key].eng)
      var url = "  http://dict.youdao.com/dictvoice?audio=" + this.word_list[this.key].eng + "&type=2";
      var audio = new Audio(url);
      audio.load();
      audio.play();
    }
  },
  methods: {
    add_to_localStorage(){
      localStorage.setItem(this.word_list[this.key].eng, this.word_list[this.key].chi);
    },
    update_chinese(){
      console.log(this.chinese_mean)
      let __this = this
      axios.post('http://127.0.0.1:8123/update_chinese/', {
        english : __this.word_list[__this.key].eng,
        chinese : __this.chinese_mean
      }).then(response => {
        console.log(response)
        if (response.data == 1){
          alert("success!!!")
        }
      })
    },
    set_complexity_0() {
      console.log(this.word_list[this.key].eng)
      axios.post('http://127.0.0.1:8123/set_complexity_0/', {
        complexity_0_word: this.word_list[this.key].eng
      }).then(response => {
        if (response.data === 'True') {
          this.bg_color = "bg-green-500"
          setTimeout(() => {
            this.bg_color = "bg-gray-800"
          }, 300)
        }
      })
    },
    Next_one() {
      this.key++
    },
    Previous () {
      this.key--
    },
    show() {
      this.isShow = true
      setTimeout(() => {
        this.isShow = false
      }, 260);
    }
  },
  created() {
    document.title = 'Movie word'
    console.log(this.$route.params.name)
    let ___this = this
    axios.get('http://127.0.0.1:8123/init/?name=' + this.$route.params.name).then(response => {
      console.log(response.data)
      ___this.word_list = response.data
    })
  }
}
</script>

<style scoped>

</style>
